<template>
    <ul class="flex">
        <ScrollNum
            v-for="(num, idx) in numArr"
            :key="idx"
            as="li"
            :i="Object.values(num)[0]"
            :label="Object.keys(num)[0]"
            :delay="idx*0.1 + 1"
        />
    </ul>
</template>

<script>
import ScrollNum from './ScrollNum.vue'
export default {
    name:'ScrollNumSample',
    components:{
        ScrollNum
    },
    props:{
        data:{
            type: [Number, String],
            default: '12,806.12'
        }
    },
    data(){
        return {
            
        }
    },
    computed: {
        numArr () {
            let str = ""
            if(typeof this.data === 'number'){
                str = String(this.data)
            }else {
                str = this.data
            }
            let arr = []
            for (let i = 0; i < str.length; i++) {
                arr.push({
                    [str[i]]:parseInt(str[i])
                })
            }
            return arr
        }
    },
    created(){},

    mounted(){},

    methods:{},

}
</script>

<style scoped>
    .flex {
        display: flex;
    }
    ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
</style>